<script>
export default {
  props: {
    value: {
      type: Number,
      default: new Date().getFullYear(),
    },
  },
  data() {
    return {
      years: [],
    };
  },
  mounted() {
    for (let i = this.value; i > this.value - 10; i--) {
      this.years.push(i);
    }
  },
  methods: {
    handleCommand(command) {
      console.log(this)
      this.$emit("input", command);
    },
  },
};
</script>

<template>
  <div>
    <el-dropdown @command="handleCommand">
      <div class="bigscreen-year-select-content">{{ value }}年</div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in years" :key="item" :command="item"
            >{{ item }} 年</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.bigscreen-year-select-content {
  background: url(../assets/images/common/bigscreen-year-select-content-bg.png)
    no-repeat;
  background-size: 100% 100%;
  width: 88px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
</style>
